<!-- The Grizzlies Tank -->
<!-- Matteo Muscella, Abrar Rashwan, Talal El Afchal -->
<!-- Midpoint displacement algorithm -->

<!-- Here starts the HTML file -->
<!doctype html>
<html lang="en">

  <!-- Here starts the head -->
  <head>

    <meta charset="UTF-8">
    <title>
      The Grizzlies Tank - Midpoint Displacement algorithm
    </title>

    <!-- Cascading Style Sheet for the page. -->
    <link rel="stylesheet" type="text/css" href="../style.css" />
    
    <!-- JavaScript -->

    <!-- <script type="text/javascript" src="midpoint_algo.js"> -->
    <!-- </script> -->

    <script type="text/javascript">
      function midPoint(x1, x2, points, range, sharpness) {
    
      // base case
      if (x2-x1 > 1) {
        
      var midPointIndex = (x1 + x2) / 2;
      points[midPointIndex][1] = ( points[x1][1] + points[x2][1] ) / 2 + Math.round(1- 2 * Math.random() * range);
        }
        }

        function genTerrain() {
        var nSeg = 64;
        var horizon = 320;
        var points = new Array(nSeg);
        
        for (i = 0; i<points.lenght; i++) {
                                     
                                     points[i] = new Array(i*640/nSeg, horizon);
                                     }
                                     
                                     midPoint(0, 64, points, 50, 2);
                                     }
    </script>

    
  </head>
  <!-- Ends of head -->

  
  <!-- Start of body -->
  <body>

    <!-- First div -->
     <div class="canvases">
       <canvas id="myCanvas1" width="640" height="480" style="border:1px solid"></canvas>
     </div>
     <!-- First div ends here -->

     
  </body>
  <!-- End of body -->
  
</html>
<!-- End if HTML file -->
